<template>
  <layout title="售后列表" :showBack="false" selected="repair" :showTabBar="true">
    <x-icon slot="icon" @click="onAdd" type="plus" style="fill:#fff;position:relative;top:-4px;right:3px;"></x-icon>

    <group title="查询条件">
      <datetime v-model="form.startTime" title="起始时间" format="YYYY-MM-DD HH:mm" :minute-list="['00', '15', '30', '45']"></datetime>
      <datetime v-model="form.endTime" title="结束时间" format="YYYY-MM-DD HH:mm" :minute-list="['00', '15', '30', '45']"></datetime>
      <x-input v-model="form.content" title="详情" placeholder="输入关键字" text-align="right" placeholder-align="right"></x-input>
      <x-button type="primary" action-type="button" style="width:90%; margin:auto;" @click.native="getList">查询</x-button>
      <div style="height:15px;"></div>
    </group>
    <template v-for="li in list">
      <form-preview :name="li" header-label="报修人员" :header-value="li.header" :body-items="li.content" :footer-buttons="li.button"
        style="margin-top:15px;"></form-preview>
    </template>

  </layout>
</template>

<script>
  import { Group, Datetime, XInput, FormPreview, XButton } from 'vux'
  import Layout from './Layout.vue'
  import { repair as api } from '../api'
  import { mapState, mapGetters } from 'vuex'
  import moment from 'moment'

  export default {
    components: {
      Group,
      Datetime,
      XInput,
      FormPreview,
      XButton,
      Layout
    },
    data() {
      return {
        form: {
          startTime: null,
          endTime: null,
          content: '',
        },
        list: [],
      }
    },
    computed: {
      ...mapGetters(['status', 'userid', 'power', 'dicObj'])
    },
    methods: {
      onAdd() {
        this.$router.push({ path: '/repair-edit'})
      },
      async getList() {
        const self = this
        this.list = []
        //查询条件
        var $like = `%${this.form.content}%`
        let query = {
          created_at: {
            $gt: this.form.startTime,
            $lt: this.form.endTime,
          },
          $and: {
            $or: {
              device_name: { $like },
              create_username: { $like },
              content: { $like },
              customer_name: { $like },
              customer_address: { $like },
              do_person_name: { $like },
              reason: { $like },
            }
          }
        }
        //获取数据
        let result = await api.index(query)
        if (!result.data) {
          return
        }
        result.data.rows.forEach(data => {
          let btn1 = [{
            style: 'primary',
            text: '指派',
            onButtonClick: (li) => {
              this.$router.push({ path: '/repair-send', query: { id: li.id } })
            }
          }]

          let btn2 = [{
            style: 'primary', text: '接单',
            onButtonClick: (li) => {
              this.$vux.confirm.show({
                content: '确认接单吗？',
                confirmText: '接单',
                // 组件除show外的属性
                onCancel() {
                },
                async onConfirm() {
                  let { id } = li
                  let result = await api.receive({ id })
                  if (!result.success) {
                    self.$vux.toast.show({
                      type: 'cancel',
                      text: '接单失败！'
                    })
                    return
                  }
                  await self.getList()
                  self.$vux.toast.show('接单成功！')
                }
              })
            }
          }, {
            text: '转发',
            onButtonClick: (li) => {
              this.$router.push({ path: '/repair-send', query: { id: li.id, isZF: true } })
            }
          }]

          let btn3 = [{
            style: 'primary', text: '处理',
            onButtonClick: (li) => {
              this.$router.push({ path: '/repair-do', query: { id: li.id } })
            }
          }, {
            text: '签到',
            onButtonClick: (li) => {
              this.$router.push({ path: '/repair-sign', query: { id: li.id } })
            }
          }, {
            text: '转发',
            style: 'default',
            onButtonClick: (li) => {
              this.$router.push({ path: '/repair-send', query: { id: li.id, isZF: true, } })
            }
          }]

          let btn4 = [{
            style: 'primary',
            text: '评价',
            onButtonClick: (li) => {
              this.$router.push({ path: '/repair-eval', query: { id: li.id } })
            }
          }]

          let btn5 = [{
            style: 'primary',
            text: '查看详情',
            onButtonClick: (li) => {
              this.$router.push({ path: '/repair-info', query: { id: li.id } })
            }
          }]

          //获取该状态下的数据应该使用的button
          let resultBtn = null
          if (data.status == 1 && this.power["SH01"]) {
            resultBtn = btn1
          } else if (data.status == 2 && this.power["SH02"] && this.userid == data.do_person_id) {
            resultBtn = btn2
          } else if (data.status == 3 && this.userid == data.do_person_id) {
            resultBtn = btn3
          } else if (data.status == 4 && (this.power["SH04"] || this.userid == data.do_person_id)) {
            resultBtn = btn4
          } else {
            resultBtn = btn5
          }

          //定义要显示的数据
          let obj = {
            header: data.create_username,
            id: data.id,
            content: [{ label: '设备名称', value: data.device_name },
            { label: '故障类型', value: this.dicObj[data.type] },
            { label: '故障描述', value: data.content },
            { label: '状态', value: this.status[data.status] },
            ],
            button: resultBtn
          }
          //根据不同状态，显示出更多的数据
          if (data.status > 1) {
            obj.content.push({ label: '技术员', value: data.do_person_name })
          }
          if (data.status > 3) {
            obj.content.push({ label: '问题原因', value: data.reason })
          }

          this.list.push(obj)
        })
      }
    },
    async mounted() {
      this.$store.commit('showBack', false)
      this.$store.commit('selectedTab', 'repair')

      this.form.startTime = moment().add(-7, 'd').format('YYYY-MM-DD HH:mm')
      this.form.endTime = moment().add(1, 'd').format('YYYY-MM-DD 00:00')
      await this.getList()
    }
  }

</script>
